<template>
    <div :class="{ headerBox: true }" id="loginBox">
        <h3 :class="{ title: true }">登录</h3>
        <!-- 输入界面 -->
        <div :class="{ inputStyle: true }">
            账号:<el-input
                v-model="account"
                placeholder="请输入账号"
            ></el-input>
        </div>
        <div :class="{ inputStyle: true }">
            密码:<el-input
                v-model="password"
                placeholder="请输入密码"
                type="password"
            ></el-input>
        </div>
        <!-- 单选框区域 -->
        <div :class="{ radioSet: true }">
            <el-radio v-model="radio" label="admins">管理员</el-radio>
            <el-radio v-model="radio" label="lessors">出租方</el-radio>
        </div>
        <!-- 按钮 -->
        <div :class="{ buttonStyle: true }">
            <el-button round @click="sendLoginData">登录</el-button>
            <el-button round @click="jumpRigister">注册</el-button>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions: loginMapActions } = createNamespacedHelpers("login"); //主仓库引入子仓库的名称,
const { mapActions: logsMapActions } = createNamespacedHelpers("logs"); //主仓库引入子仓库的名称,

export default {
    data() {
        return {
            account: "",
            password: "",
            radio: "admins",
        };
    },
    methods: {
        //跳转至注册
        jumpRigister() {
            this.$router.push("/register");
        },
        ...logsMapActions(["addLogs"]),
        ...loginMapActions(["login"]),
        async sendLoginData() {
            const data = await this.login({
                account: this.account,
                password: this.password,
                radio: this.radio,
            });
            if (data.status) {
                // this.$router.push("/register/" + data.data[0]._id);
                if (this.radio == "admins" && data.data[0].power == "2") {
                    //普通管理员
                    //添加日志
                    const id = data.data[0]._id;
                    const accounts = data.data[0].account;
                    this.addLogs({ id, accounts });
                    //本地保存管理员或者是其他用户
                    localStorage.setItem("userJudge", [id, accounts, "admins"]);
                    this.$router.push("/system");
                } else if (
                    this.radio == "admins" &&
                    data.data[0].power == "1"
                ) {
                    //超级管理员
                    //本地保存管理员或者是其他用户
                    const id = data.data[0]._id;
                    const accounts = data.data[0].account;
                    localStorage.setItem("userJudge", [
                        id,
                        accounts,
                        "superAdmins",
                    ]);
                    this.$router.push("/system");
                } else {
                    //出租方
                    //本地保存管理员或者是其他用户
                    //本地保存管理员或者是其他用户
                    const id = data.data[0]._id;
                    const accounts = data.data[0].account;
                    localStorage.setItem("userJudge", [
                        id,
                        accounts,
                        "lessors",
                    ]);
                    this.$router.push("/system");
                }
            }
        },
    },
    computed: {},
};
</script>

<style  lang="scss">
body,
html {
    overflow: hidden;
}
#loginBox {
    margin-top: 200px;
}
/* 登录框布局 */
html {
    background-image: url("./login.jpg");
    background-position: center;
}
.headerBox {
    width: 400px;
    /* margin: 0 auto; */
    border: 1px solid #eeeeee;
    border-radius: 5px;
    background-color: #eeeeee;
}
.headerBox * {
    margin: 5px;
}
/* 标题 */
.title {
    text-align: center;
}
/* 输入框样式 */
.inputStyle {
    width: 250px;
    margin: 0 auto;
}
/* 单选框设置 */
.radioSet {
    text-align: center;
}
/* 按钮样式 */
.buttonStyle {
    text-align: center;
}
</style>